*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
html,body {width: 100%;height: 100%;overflow: hidden;}
.index {width: 100%;height: 100%;}
.index>.swiper-wrapper {width: 100%;height: 100%;text-align: center;font-size: .5rem;line-height: 2rem;}

/*弹窗样式*/
.layer-bg{ display: none; width: 100%; height:100%; background: rgba(0,0,0,.8); position: fixed; z-index: 99; top: 0; left: 0;}
.layer-box{width: 4rem; padding: .55rem 0; background: #fff url(../images/layer-bg.png) no-repeat ; background-size: .35rem auto; background-position: .16rem .20rem; position: fixed; left: 50%; margin-left: -2rem; top: 50%;z-index: 100; text-align: center; font-size: .3rem; color: #333; line-height: .48rem; margin-top: -1rem; border-radius: .1rem; box-shadow: 0px 0px 10px rgba(235,71,19,.5); font-weight: 600; opacity: 0; pointer-events: none; transform: translateY(.5rem) scale(.8); -webkit-transform: translateY(.5rem) scale(.8);  transition-duration: .5s; -webkit-transition-duration: .5s;}
.layer-box .layer-close{background: url(../images/layer-close.png) no-repeat center; position: absolute; right: .2rem; top: .2rem; width: .36rem; height: .36rem; background-size: cover; }
.share-arrow{ background: url(../images/share-arrow.png) no-repeat center; background-size: cover; width: 2.26rem; height: 1.64rem; position: fixed; z-index: 100; top: .36rem; right: .8rem; opacity: 0;  pointer-events: none; transition-duration: .5s; -webkit-transition-duration: .5s;}
.share-arrow.show,.layer-box.show{ opacity: 1; transform: translateY(0rem) scale(1); -webkit-transform: translateY(0rem) scale(1); pointer-events: all; }
.share-arrow.show{animation: move 1.5s ease infinite; -webkit-animation:move 1.5s ease infinite; -moz-animation:move 1.5s ease infinite; }

/*页面箭头*/
.index .arrow{ background: url(../images/downArrow.png) no-repeat center; width: 1.56rem; height: .97rem; background-size: cover; position: fixed; z-index: 10; bottom: .3rem; left: 50%; margin-left: -.78rem;animation: moveDown 1.5s ease infinite; -webkit-animation:moveDown 1.5s ease infinite; -moz-animation:moveDown 1.5s ease infinite; }

/*页面内容样式*/
.index .page{  background-size: 100% 100%; background-repeat: no-repeat;}
.index .returnPage{ width: 7.06rem; height: 1.46rem; position: absolute; left: 50%; margin-left: -3.53rem; bottom: .55rem; background-repeat: no-repeat; background-size: cover; background-color: transparent; border: none;}	
.index .page3 .returnPage{ background-image: url(../images/page3-btn.png); }	
.index .page4 .returnPage{ background-image: url(../images/pageBtn4.png); }	
.index .page5 .returnPage{ background-image: url(../images/subBtn.png); }	      
.index .page1{ background-image: url(../images/pageBg1.jpg);}	 
.index .page2{ background-image: url(../images/pageBg2.jpg);}	 
.index .page3{ background-image: url(../images/pageBg3.jpg);}	 
.index .page4{ background-image: url(../images/page4.jpg);}	 
.index .page5{ background-image: url(../images/page5.jpg);}	    	
.index .page5 .imgs{ display: block; width: 6.1rem; margin:1.6rem auto 0; border-radius: 3px; overflow: hidden;}
.index .page5 .title{ font-size: .26rem; font-weight: bold; line-height: .3rem; text-align: left; padding: .2rem .8rem;}
.index .page5 .answer-box{ font-size: .24rem; line-height: .5rem; position: relative; text-align: left;padding: 0 .8rem; color: #666;}
.index .page5 .answer-box input[type='radio']{ opacity: 0; position: absolute; right: .8rem; width: .32rem; height: .32rem; top: 50%; margin-top: -.16rem;box-sizing: border-box; -webkit-box-sizing: border-box;}
.index .page5 .answer-box .mf-checkbox{position: absolute; right: .8rem; width: .32rem; height: .32rem; top: 50%; margin-top: -.16rem; border: 1px solid #999; border-radius: 50%; box-sizing: border-box; -webkit-box-sizing: border-box;}
.index .page5 .answer-box .mf-checkbox.check{ background: url(../images/gou.png) no-repeat center; background-size: cover; border: none;}
.index .page5 .nick-name{ width: 6.1rem; margin: auto; height: .98rem; background: #ececec; margin-top: .2rem; font-size: .28rem; color: #333; line-height: .98rem; padding: 0 .4rem; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 3px; text-align: left;}
.index .page5 .nick-name input{ border: none; background: no-repeat; font-size: .28rem; -webkit-user-modify: read-plaintext-only;  
    -moz-user-modify: read-plaintext-only;  
    -ms-user-modify: read-plaintext-only;  
    -o-user-modify: read-plaintext-only;  
    user-modify: read-plaintext-only;  }

	
@keyframes move{
    0%,100%{transform: translate(-10px,10px);}
    50%{transform: translate(0,0);}
}

@-webkit-keyframes move{
    0%,100%{-webkit-transform: translate(-10px,10px);}
    50%{-webkit-transform: translate(0,0);}
}
@-moz-keyframes move{
    0%,100%{-moz-transform: translate(-10px,10px);}
    50%{-moz-transform: translate(0,0);}
}


@keyframes moveDown{
    0%,100%{transform: translateY(10px);}
    50%{transform: translate(0);}
}
@-webkit-keyframes moveDown{
    0%,100%{-webkit-transform: translateY(10px);}
    50%{-webkit-transform: translate(0);}
}
@-moz-keyframes moveDown{
    0%,100%{-moz-transform: translateY(10px);}
    50%{-moz-transform: translate(0);}
}

/* music */
@-webkit-keyframes reverseRotataZ{
	0%{-webkit-transform: rotateZ(0deg);}
	100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
	0%{-webkit-transform: rotateZ(0deg);}
	100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url(../images/mcbg.png) no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}